<template>
  <view class="tool-container">
    <view class="tool-content">
      <view class="tool-left">
        <view class="tool-button">
          <uni-icons type="shop" size="22">店铺</uni-icons>
          <text>店铺</text>
        </view>
        <view class="tool-button" @click="cartAction">
          <uni-icons type="cart" size="22"></uni-icons>
          <text>购物车</text>
          <text class="cart-count" v-if="cartList.length">{{
            cartList.length
          }}</text></view
        ></view
      >
      <view class="tool-right">
        <button @click="addAction">加入购物车</button>
        <button>立即购买</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex"

export default {
  emit: ["addGoods", "cartJump"],
  methods: {
    addAction() {
      this.$emit("addGoods")
    },

    cartAction() {
      this.$emit("cartJump")
    },
  },
  computed: {
    ...mapState(["cartList"]),
  },
}
</script>

<style lang="scss" scoped>
.tool-container {
  background-color: white;
  padding-bottom: env(safe-area-inset-bottom);
  .tool-content {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15rpx 20rpx;
    height: 100rpx;
    border-top: 1rpx solid #f2f2f2;
    background-color: white;

    .tool-left {
      display: flex;
      justify-content: space-between;
      width: 180rpx;

      .tool-button {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        width: 80rpx;
        font-size: 20rpx;

        .cart-count {
          position: absolute;
          right: -5rpx;
          top: -5rpx;
          background-color: #c00000;
          color: white;
          padding: 0 12rpx;
          border-radius: 20rpx;
        }
      }
    }

    .tool-right {
      display: flex;
      width: 460rpx;

      button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 230rpx;
        font-size: 28rpx;
        color: white;

        &:first-child {
          background-color: #c00000;
          border-radius: 35rpx 0 0 35rpx;
        }

        &:last-child {
          background-color: orange;
          border-radius: 0 35rpx 35rpx 0;
        }
      }
    }
  }
}
</style>
